<template>
  <div class="catalogue">
    <div id="statusBar"></div>
    <van-nav-bar title="全部目录" left-arrow @click-left="returnBookDetails" v-if="!isLoading" />
    <div class="box" v-if="!isLoading">
      <ul>
        <li class="one-text" v-for="(item, index) in bookChaptersData" :key="index" @click="goToRead(index, item.link)">{{item.title}}</li>
      </ul>
    </div>
    <div class="back-top" v-if="btnFlag">
      <van-icon name="back-top" color="#999" size="26" @click="top" />
    </div>
  </div>
</template>

<script>
  export default {
    name: 'Catalogue',

    data() {
      return {
        bookId: '',
        // 章节目录数据
        bookChaptersData: [],
        btnFlag: false,
        isLoading: true
      }
    },

    created() {
      // 获取bookid
      this.bookId = this.$route.query.bookId;
      // 获取书籍源
      this.getBookSources();
    },

    updated() {
      // 设置历史浏览记录位置
      this.top();
    },

    methods: {
      // 获取书籍源
      getBookSources() {
        this.axios.get('book-sources', {
          params: {
            view: 'summary',
            book: this.bookId
          }
        }).then(res => {
          // console.log('getBookSources res', res);
          if(res.status === 200) {
            // 第一个默认是正版书源
            this.getBookChapters(res.data[0]._id);
          }
        }).catch(err => {
          console.log('err', err);
        })
      },

      // 获取章节
      getBookChapters(_id) {
        this.axios.get(`book-chapters/${_id}`, {
          // params: {}
        }).then(res => {
          // console.log('getBookChapters res', res);
          if(res.status === 200) {
            // 处理link格式
            res.data.chapters.forEach(v => {
              v.link = encodeURIComponent(v.link);
            })
            this.bookChaptersData = res.data.chapters;
            this.isLoading = false;
          }
        }).catch(err => {
          console.log('err', err);
        })
      },

      top() {
        // 获取本地存储的数据
        let oldBookShelf = localStorage.getItem('bookShelf');
        // 转换成json格式
        oldBookShelf = JSON.parse(oldBookShelf);
        if(oldBookShelf == null) {
          return;
        }
        // 遍历
        oldBookShelf.forEach((item, index) => {
          // 判断是否已经存在
          if(item.bookId === this.$route.query.bookId) {
            if(item.index) {
              // 设置浏览位置
              window.scrollTo(0, item.index * 45);
            }
          }
        })
      },

      // 返回书籍详情页
      returnBookDetails() {
        this.$router.go(-1);
      },

      // 跳转到阅读页
      goToRead(index, link) {
        // 获取本地存储的数据
        let oldBookShelf = localStorage.getItem('bookShelf');
        // 转换成json格式
        oldBookShelf = JSON.parse(oldBookShelf);
        if(oldBookShelf == null) {
          return;
        }
        // 遍历
        oldBookShelf.forEach(item => {
          // 判断是否已经存在
          if(item.bookId === this.$route.query.bookId) {
            // 存储章节索引
            item.index = index;
            // 存储link
            item.link = link;
            if(item['scrollTop' + item.index] == undefined) {
              // 存在则将用户浏览当前位置记录起来
              item['scrollTop' + item.index] = 0;
            }
          }
        })
        // console.log('oldBookShel',oldBookShelf);
        // 转换成字符串
        oldBookShelf = JSON.stringify(oldBookShelf);
        // 存储到本地存储
        localStorage.setItem('bookShelf', oldBookShelf);
        this.$router.push({name: 'Read', query: {link, bookId: this.bookId}});
      },
    }
  }
</script>

<style lang="less" scoped>
::v-deep .van-nav-bar {
  position: sticky;
  top: 28px;
  z-index: 999999;
}
::v-deep .van-nav-bar .van-icon {
  color: #00bb86;
}
::v-deep .van-nav-bar__title {
  color: #00bb86;
}
.box {
  ul {
    padding: 0 20px;
    li {
    padding: 12px 0;
    max-width: 335px;
    font-size: 15px;
    border-bottom: 1px solid #f7f8fa;
  }
  }
}
.back-top {
  position: fixed;
  bottom: 80px;
  right: 10px;
}
</style>